import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Button, Form, Input, Select } from "antd";
import E from "wangeditor";

import { Link } from "react-router-dom";
import Articel from './Articel';
import action from '../../store/action';
import Upload from './Dynamic_add/Upload';



class index extends React.Component {
    constructor() {
        super();
    }
    async componentDidMount() {
        const elem = this.refs.editorElem;
        const editor = new E(elem);
        // editor.customConfig.uploadImgServer = '/DOMAIN_API';
        editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
        editor.customConfig.uploadImgShowBase64 = false;
        editor.customConfig.uploadFileName = 'article'  //上传参数 自定义
        // 使用 onchange 函数监听内容的变化，并实时更新到 state 中
        editor.customConfig.uploadImgServer = 'http://www.bestzc.cn:8080/materials.web/';
        editor.customConfig.uploadImgHooks = {
            customInsert: function (insertImg, result, editor) {
                var url = result.data.url  //监听图片上传成功更新页面
                insertImg(url)
            }
        };
        editor.customConfig.onchange = html => {
            const { dynamic_wang } = this.props;
            dynamic_wang(html)
        }
        editor.create();
        const val = this.props.dynamic_EditData[0].context;

        editor.txt.html(val)

    }
    render() {

        const layout = {
            labelCol: {
                span: 2,
            }
        };
        const tailLayout = {
            wrapperCol: {
                offset: 2,
                span: 15,
            },
        };
        const { edit_falseImg } = this.props;
        const onFinish = values => {
         
            const list = {
                id: this.props.dynamic_EditData[0].id,
                title: values.remark,
                coverPicPath: values.img_url,
                context: this.props.wang == '' ? this.props.dynamic_EditData[0].context : this.props.wang,
                type: values.temperature
            }
            this.$axios.post('/manager/api/updateDynamicAnnouncement', list).then((res) => {
                if (res.status === 1) {
                    this.props.history.push('/admin/Dynamic');

                    edit_falseImg()

                }
            }
            ).catch((err) => {
                console.log(err);
            })
        }

        const onFinishFailed = errorInfo => {
            console.log(errorInfo);
        };
    
        const data = this.props.dynamic_EditData[0];
        const op_data = ['动态', '公告', '最新数据', '最新标准', '最新资源', '最新案例', '热门检索', '材料性能数据', '测试方法', '测试规范'];
        return <div>
            <Form
                {...layout}
                name="basic"

                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
            >
                <div>
                    <div className='add_flex'>

                        <Form.Item name="temperature" label="类型:" rules={[
                            {
                                required: true,
                                message: '内容不能为空!',
                            },
                        ]}
                            initialValue={data.type}
                        >
                            <Select placeholder="请选择">
                                {
                                    op_data.map((item, index) => (
                                        <Select.Option value={index + 1} key={index}>{item}</Select.Option>
                                    ))
                                }
                            </Select>
                        </Form.Item>

                        <Form.Item name="remark" label="标题:" initialValue={data.title}>
                            <Input type="textarea" />
                        </Form.Item>
                    </div>
                    <Upload />
                    <div ref="editorElem" className='add_art' >


                    </div>

                </div>
                <Form.Item {...tailLayout}>
                    <Button type="primary" htmlType="submit" style={{ margin: '20px 10px' }}>
                        保存
                </Button>
                    <Button type='primary' onClick={() => { 
                        this.props.history.push('/admin/Dynamic');
                         edit_falseImg() 
                    }}>返回</Button>
                </Form.Item>
            </Form>
        </div>
    }
}

export default connect(state => ({ ...state.custom }), action.custom)(index);